<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css语法与选择器</title>
</head>
<link rel="stylesheet" href="./reset.css">
<style>
  a:link {
    color: aqua
  }

  a:visited {
    color: bisque;
  }

  a:hover {
    color: azure;
  }

  a:active {
    color: black;
  }

  .box1 {
    width: 100px;
    height: 100px;
    background-color: aqua;
    border: 10px solid orange;
    overflow: scroll;
  }
</style>

<body>
  <!-- 伪类选择器：不存在 特殊的类 用来描述一个元素的特殊状态
  一般都以:开头
  伪元素选择器：用来表示页面中以一些特殊的并不真实的存在元素
   -->
  <p style="color:red;font-size: 60px;">内敛样式</p>
  <a href="#">这是一个链接</a>


  <div class="box1">
    img11.360buyimg.com/da/s380x300_jfs/t1/110594/16/12402/55316/5e96dd0fEee769a19/d202e0636bcf845e.png.webp"

    14. 组件的生命周期
    1. 创建
    当组件在内存中创建完毕，会调用created() 作用: 发起ajax请求
    当组件被成功的渲染到页面上，会自动调用mounted() 作用: 操作DOM
    2. 运行
    组件被重新渲染 updated()
    3. 销毁
    组件销毁完毕，自动调用unmounted()
    15. 组件之间的数据共享
    1. 父组件通过v-bind属性绑定向子组件共享数据，子组件使用props接收数据
    2. 子向父传值，通过自定义事件 this.$emit('method01') @method01=”method02“
    3. 父子之间数据同步，使用v-model维护 v-model:attribute
    4. 兄弟间数据共享 EventBus mitt插件 bus.emit() bus.on()
    5. 父向多级子组件传递数据 provide() 子组件inject[]

    行内元素不支持设置宽度和高度
  </div>
</body>

</html>